<template>
	<view>
		<uni-segmented-control :current="current" :values="tabitem" :style-type="styleType" :active-color="activeColor"
			@clickItem="onClickItem"></uni-segmented-control>
		<view class="content">
			<view v-if="current === 0" >
				<unfinish ></unfinish>
			</view>
			<view v-if="current === 1">
				<Ranking ></Ranking>
			</view>
			<view v-if="current === 2">
				<Complete ></Complete>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import unfinish from '../component/Unfinished.vue'
	import Ranking from '../component/Ranking.vue'
	import Complete from '../component/Complete.vue'
	import store from '../../../store/index.js'
	import myRequest from '../../../utils/myRequest.js'

	export default {
		components: {
			unfinish,
			Ranking,
			Complete
		},
		setup() {
			let data = reactive({
				current: 0,
				useId: '',
				tabitem: ['待上课', '等位中', '已完成'],
				ForclassArray:[],
				allelicArray:[],
				hasBeenArray:[],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				onClickItem(e) {
					if (data.current !== e.currentIndex) {
						data.current = e.currentIndex
						console.log(data.current)
					}
				},
				styleChange(e) {
					if (data.styleType !== e.detail.value) {
						data.styleType = e.detail.value
					}
				},
				colorChange(e) {
					if (data.styleType !== e.detail.value) {
						console.log(e.detail.value);
						data.activeColor = e.detail.value
					}
				},
				getData() {
					myRequest({
						url: '/getMake',
						method: 'post',
						data: {
							UseId: data.useId
						}
					}).then((res) => {
						let m = res.data.data
						m.forEach(i => {
							switch (i.makeType) {
								case 1:
									data.ForclassArray.push(i)
									break;
								case 2:
									data.allelicArray.push(i)
									break;
								case 3:
									data.hasBeenArray.push(i)
									break;
							}
						})
					})
				},

			})
			onMounted(() => {
				data.useId = store.state.userdata[0].vipId
				data.getData()
			})
			return {
				...toRefs(data)
			}

		}
	}
</script>

<style lang="scss" scoped>

</style>
